import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Block} from '@tarojs/components';
import './detail-header.scss';
import {H5_VIDEO} from "../../constants/api";

interface IndexVideoType {
  videoId: string
  playerId: string[]
  onPrepPlay: any
  playSta: boolean
  autoplay: any
}

let iframe = ''
let txv = ''
if (process.env.TARO_ENV === 'h5') {
  iframe = document.createElement("iframe");
} else {
  try {
    txv = Taro.requirePlugin('tencentvideo')
  }catch (e) {
    txv = ''
  }
}

const TxvContext = process.env.TARO_ENV === "weapp" ? txv : iframe;
let txvContext: any = '';

const IndexVideo: React.FC<IndexVideoType> = ({videoId = '', autoplay = true, playerId, onPrepPlay, playSta}) => {
  const [playStatus, setPlayStatus] = useState(false);
  const [operation, setOperation] = useState(true);
  if (process.env.TARO_ENV === "weapp") {
    useEffect(() => {
      if (videoId) txvContext = TxvContext && TxvContext.getTxvContext(playerId);
      const temp: any[] = [];
      if (videoId) temp.push({type: 'video', data: videoId || ''});
    }, [playerId, videoId])
    useEffect(() => {
      if (operation && txvContext) {
        if (playSta) {
          txvContext.play();
          setPlayStatus(true)
        } else {
          txvContext.pause();
          setPlayStatus(false)
        }
      }
    }, [operation, playSta])
  }
  if (process.env.TARO_ENV === "h5") {
    useEffect(() => {
      iframe.style.width = "100%"
      iframe.style.height = window.innerWidth * 0.55 + 'px'
      document.querySelector('.videoBox').appendChild(iframe)
      iframe.src = H5_VIDEO + videoId;
    }, [videoId])
  }
  const pause = () => {
    txvContext && txvContext.pause();
    setOperation(false)
  }
  const play = () => {
    txvContext && txvContext.play();
    setOperation(true)
  }
  return (
    <View className='videoBox' hidden={!videoId}>
      {process.env.TARO_ENV === 'weapp' && <Block>
        <txv-video
          width='100%'
          height='100%'
          controls={false}
          autoplay={autoplay}
          // isHiddenStop={true}
          isNeedMutex
          loop
          className='video'
          vid={videoId}
          playerid={playerId}
          object-fit='contain'
          isNeedMutex
          isHiddenStop
          showCenterPlayBtn
          onPlay={() => {
            setOperation(true)
          }}
        />
        <View className={(!playStatus || !operation) ? "hide1 left" : "hide2 left"}>
          {playStatus && operation &&
          <View className='zz' onClick={pause}> <Text className='at-icon icon at-icon-pause'></Text></View>}
          {(!playStatus || !operation) && <View className='zz' onClick={(e) => {
            play()
          }}
          > <Text className='at-icon icon at-icon-play'></Text></View>}
        </View>
      </Block>}
    </View>
  )
}

IndexVideo.config = {
  usingComponents: {
    "txv-video": "plugin://tencentvideo/video"
  }
}
IndexVideo.options = {
  addGlobalClass: true
}
IndexVideo.defaultProps = {}
export default IndexVideo
